<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cont{width: 1000px;border: solid 1px black;margin: 0 auto;overflow: hidden;}
    .cont .box{float: left;border: solid 1px black;box-sizing: border-box;width: 250px;}
    .cont .box>img{width: 80%;height:200px;display: block;margin: 4px auto;}
    .cont .box .imgs{width: 100%;height: 40px;}
    .cont .box .imgs img{width: 40px;height:40px;float: left;}
    .cont p{margin: 5px 0;}
    .cont p:nth-of-type(1){height: 40px;line-height: 20px;overflow: hidden;}
    .cont .tags{width: 100%;height: 20px;}
    .cont .tags span{float: left;margin: 0 2px;padding: 2px;font-size: 12px;color: #fff;}
  </style>
</head>
<body>
</body>
<script src="./data.js"></script>
<script>
  console.log(goods)

  var str = "";

  str += '<div class="cont">';
  for(var i=0;i<goods.length;i++){
    str += '<div class="box"><img src="'+ goods[i].imgs[0].big +'" alt=""><div class="imgs">';
    for(var j=0;j<goods[i].imgs.length;j++){
      str += '<img src="'+ goods[i].imgs[j].small +'" alt="">';
    }
    str += '</div><p>'+ goods[i].name +'</p><p>价格：'+ goods[i].price +'</p><p>店家：'+ goods[i].shop +'</p><p>销量：'+ goods[i].tip +'</p><div class="tags">';
    for(var j=0;j<goods[i].tags.length;j++){
      str += '<span style="background:'+ goods[i].tags[j].color +'">'+ goods[i].tags[j].text +'</span>';
    }
    str += '</div></div>';
  }
  str += '</div>';

  document.write( str );
  // console.log(str)


  // =========

  var msg = "天气";

  // var s = "今天'"+ msg +"'挺好";
  var s = '今天"'+ msg +'"挺好';

  console.log( s );

  // 字符串拼接的口诀：删除字符的变量位置，使用字符的包裹引号打断，使用两个加好连接，在两个加号中间放变量

</script>
</html>